<template>
  <div class="case-operation">
    <el-row>
      <el-col :span="5">
        <caseGroup @getCaseInfo="getCase"></caseGroup>
      </el-col>
      <el-col :span="19">
        <div class="case-content">
          <el-tabs v-model="activeName">
            <el-tab-pane label="预览" name="first">
              <caseInfo ref="caseInfo" @editCaseStep="editCaseStep"></caseInfo>
            </el-tab-pane>
            <el-tab-pane label="添加/编辑" name="second">
              <caseEdit ref="caseEdit" @getCaseSteps="getCaseSteps"></caseEdit>
            </el-tab-pane>

          </el-tabs>

        </div>

      </el-col>

    </el-row>

  </div>
</template>

<script>
import caseGroup from './group/group.vue'
import caseInfo from './caseInfo.vue'
import caseEdit from './caseEdit.vue'
export default {
  data () {
    return {
      activeName: 'first',

    }
  },

  methods: {

    //获取用例
    getCase (caseId) {
      this.$refs.caseInfo.getCase(caseId)
    },

    // //编辑用例步骤
    editCaseStep (caseStepId) {
      //   this.$refs.caseEdit.getCaseById(caseId)
      //   this.activeName = 'second'
    },

    //获取用例步骤
    getCaseSteps (caseId) {
      this.$refs.caseInfo.getCaseStep(caseId)
    }
  },

  components: {
    caseGroup,
    caseInfo,
    caseEdit
  }
}
</script>

<style scoped>
.case-content {
  margin-left: 5px;
}
</style>